<template>
  <div>
    <div v-show="myflag" class="box">
      <!-- 头部 -->
      <div >
        <slot name="top">
          <div class="head">
            <h3>
              {{ title }}
            </h3>
            <div @click="close">X</div>
          </div>
        </slot>
      </div>
      <!-- 主体 -->
      <div class="body">
        <slot name="body"></slot>
      </div>
      <!-- 底部 -->
      <div class="foot">
        <slot name="foot"></slot>
      </div>
    </div>
    <div class="mask" v-show="myflag" @click="close"></div>
  </div>
</template>

<script>
export default {
  props: {
    // 控制模态框显示隐藏
    myflag: {
      type: Boolean,
      default: true,
    },
    // 标题
    title:{
        type:String,
        default:"标题"
    }
  },
  name: "",
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    close() {
      this.$emit("maskClose", !this.maskFlag);
    },
  },
};
</script>

<style scoped lang='scss'>
.box {
  width: 500px;
  height: 250px;
  background: white;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -125px;
  margin-left: -250px;
  z-index: 3;
}
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.5;
  top: 0;
  left: 0;
  z-index: 2;
}
.head{
   display: flex;
    justify-content: space-between;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
}
.body {
  padding: 20px;
  height: 100px;
}
.foot {
  float: right;
  margin-right: 20px;
}
</style>
